<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS selector text  与 通用选择器</title>
    <style type="text/css" media="screen">
    /**通用选择器**/
    * {
        background-color: gray;
    }
      .footer>li {
        border: 2px solid green;
      }
      .fooder li {
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <ul class="footer">
      <b>字选择器</b>
      <li>这个是其作用的li元素,也是第一代子元素</li>
      <span>这个是不起作用的span元素<li>这个li元素也没有效果,由于我是第二代子元素</li></span>
      <li>这个是其作用的li元素,也是第一代子元素</li>
    </ul>
    <hr />
    <ul class="fooder">
      <b>派生与后代选择器</b>

      <li>这个是其作用的li元素，我是后代</li>
      <span>这个是不起作用的span元素<li>这个li元素是有效果的，我是也是后代</li></span>
      <li>这个是其作用的li元素，我是后代</li>
    </ul>
  </body>
</html>
